<!-- 商户客户管理入口页 -->
<template>
  <div class="padding-20 padding-top-30">
    <div>
      <el-form :model="m_Form" ref="form" label-width="120px" size="small" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-select v-model="m_Form.projectKey" placeholder="请选择项目" clearable>
                <el-option v-for="item in m_ProjectList" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="租赁类型">
              <el-select v-model="m_Form.contractType" placeholder="请选择租赁类型" clearable>
                <el-option v-for="item in m_LeaseList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称">
              <el-select clearable v-model="m_Form.partnerKey" filterable remote placeholder="请输入客户名称" :remote-method="getCustomer" @clear="m_Form.partnerKey = null">
                <el-option v-for="(item, index) in m_CustomerList" :key="index" :label="item.partnerName" :value="item.primaryKey"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业态/行业">
              <el-select clearable v-model="m_Form.industryType" placeholder="请选择业态/行业" @clear="m_Form.industryType = null" @change="changeIndustry">
                <el-option v-for="(item, index) in m_FormatsAndIndustryList" :key="index" :label="item.catalogName" :value="item.primaryKey"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌">
              <el-select clearable v-model="m_Form.operateBrand" placeholder="请选择品牌" @clear="m_Form.operateBrand = null">
                <el-option v-for="(item, index) in m_FormatsBrandList" :key="index" :label="item.catalogName" :value="item.primaryKey"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商铺门牌号">
              <el-select clearable v-model="m_Form.shopCode" filterable remote placeholder="请输入商铺门牌号" :remote-method="queryShopNumber" @clear="m_Form.shopCode = null">
                <el-option v-for="(item, index) in m_shopCodeList" :key="index" :label="item.shopNumber" :value="item.shopCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">-->
<!--            <el-form-item label="是否主力店">-->
<!--              <el-select v-model="m_Form.ifMainStore" placeholder="请选择是否主力店" clearable>-->
<!--                <el-option v-for="item in m_IsMainStoreList" :key="item.id" :label="item.name" :value="item.id" />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="租金贡献大于">-->
<!--              <el-input type="number" v-model="m_Form.paymentAmountStart" placeholder="请输入租金贡献" :maxlength="10">-->
<!--                <span slot="append">元</span>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="租金贡献小于">-->
<!--              <el-input type="number" v-model="m_Form.paymentAmountEnd" placeholder="请输入租金贡献" :maxlength="10">-->
<!--                <span slot="append">元</span>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="租赁面积大于">-->
<!--              <el-input type="number" v-model="m_Form.cadAreaStart" placeholder="请输入租金面积" :maxlength="10">-->
<!--                <span slot="append">平方米</span>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="租赁面积小于">-->
<!--              <el-input type="number" v-model="m_Form.cadAreaEnd" placeholder="请输入租金面积" :maxlength="10">-->
<!--                <span slot="append">平方米</span>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="合作时长大于">-->
<!--              <el-input type="number" v-model="m_Form.geFirstCooperationDate" placeholder="请输入合作时长" :maxlength="10">-->
<!--                <span slot="append">天</span>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="合作时长小于">-->
<!--              <el-input type="number" v-model="m_Form.leFirstCooperationDate" placeholder="请输入合作时长" :maxlength="10">-->
<!--                <span slot="append">天</span>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="黑名单">-->
<!--              <el-select v-model="m_Form.ifBlackList" placeholder="请选择是否黑名单" clearable>-->
<!--                <el-option v-for="item in m_BlacklistList" :key="item.id" :label="item.name" :value="item.id" />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="查询开始时间">-->
<!--              <el-date-picker clearable v-model="m_Form.firstCooperationDateStart" type="date" :editable="false" placeholder="选择日期" style="width: 100%"> </el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="查询结束时间">-->
<!--              <el-date-picker clearable v-model="m_Form.firstCooperationDateEnd" type="date" :editable="false" placeholder="选择日期" style="width: 100%"> </el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" size="mini" @click="out()">导出</el-button>
            <el-button type="primary" size="mini" @click="GetData()">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table @row-click="rowClick" :data="m_TableData" style="width: 100%">
      <el-table-column v-for="(col, i) in Columns" :key="i" :prop="col.prop" :label="col.label" :width="col.width ? col.width : null" :align="col.align ? col.align : null" :min-width="col.minwidth ? col.minwidth : null">
        <template slot-scope="scope">
          <div style="cursor: pointer" v-if="col.prop == 'contractStatus'">
            <el-button type="text" size="mini" @click="goAddPage(scope.row)">{{ col.customRender ? col.customRender(scope, scope.row, scope.row[col.prop]) : scope.row[col.prop] }}</el-button>
          </div>
          <div v-else>
            {{ col.customRender ? col.customRender(scope, scope.row, scope.row[col.prop]) : scope.row[col.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 20px; display: flex; justify-content: flex-end">
      <el-pagination background layout="total, prev, pager, next" :total="m_QueryParams.total" :current-page.sync="m_QueryParams.currentPage" :page-size="m_QueryParams.pageSize" @current-change="currentchange"> </el-pagination>
    </div>
    <!-- <el-dialog title="弹窗模板" width="50%">
      <span slot="footer" class="dialog-footer"><el-button size="small">取 消</el-button> <el-button size="small" type="primary">保存</el-button> </span>
    </el-dialog> -->
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { getMenuList } from '@/api';
  import Api from '../../api/clientManage';
  import $ from 'jquery';

  export default {
    components: {},
    data() {
      return {
        m_Form: {
          projectKey: null,
          contractType: null,
          partnerKey: null,
          industryType: null,
          operateBrand: null,
          shopCode: null,
          ifMainStore: null,
          paymentAmountStart: null,
          paymentAmountEnd: null,
          cadAreaStart: null,
          cadAreaEnd: null,
          leFirstCooperationDate: null,
          geFirstCooperationDate: null,
          ifBlackList: null,
          firstCooperationDateStart: null,
          firstCooperationDateEnd: null,
        },
        m_QueryParams: { total: 0, currentPage: 1, pageSize: 10 },
        m_TableData: [],
        //项目列表
        m_ProjectList: [],
        //租赁类型
        m_LeaseList: [
          { value: 'ZL', label: '租赁类合同' },
          { value: 'GGZL', label: '广告位租赁合同' },
          { value: 'LSCD', label: '临时场地租赁合同' },
          { value: 'WRSB', label: '无人设备场地租赁合同' },
          { value: 'TCCYY', label: '停车场代运营合同' },
          { value: 'QTSR', label: '其他收入合同' },
        ],
        //客户列表
        m_CustomerList: [],
        //业态/行业
        m_FormatsAndIndustryList: [],
        m_FormatsBrandList: [],
        //品牌
        brandList: [],
        //商铺门牌号
        m_shopCodeList: [],
        //是否主力店
        m_IsMainStoreList: [
          {
            name: '是',
            id: 1,
          },
          {
            name: '否',
            id: 0,
          },
        ],
        //黑名单
        m_BlacklistList: [
          {
            name: '是',
            id: 1,
          },
          {
            name: '否',
            id: 0,
          },
        ],
      };
    },

    computed: {
      Columns() {
        let align = 'center';
        let width = null;
        let columns = [
          // {
          //   label: '项目',
          //   prop: 'partnerName',
          //   align: align,
          //   width: width,
          // },
          {
            label: '客户名称',
            prop: 'partnerName',
            align: align,
            width: width,
          },
          {
            label: '客户类型',
            prop: 'partnerCategory',
            align: align,
            width: width,
            customRender: function (scope, row, text) {
              if (text == 1) return '企业';
              if (text == 2) return '个人';
              return '';
            },
          },
          {
            label: '租赁类型',
            prop: 'contractType',
            align: align,
            width: width,
          },
          {
            label: '手机号',
            prop: 'mobile',
            align: align,
            width: width,
            customRender: function (scope, row, text) {
              // if (scope.row.partnerCategory != 2) return '';
              return text;
            },
          },
          {
            label: '状态',
            prop: 'contractStatus',
            align: align,
            width: width,
            customRender: function (scope, row, text) {
              if (text == 0) return '草稿';
              if (text == 1) return '审批中';
              if (text == 2) return '履行中';
              if (text == 3) return '驳回';
              if (text == 4) return '履行完毕';
              if (text == 5) return '已废止';
              if (text == 6) return '待生效';
              return '-';
            },
          },
        ];
        return columns;
      },
    },

    mounted() {
      this.projectlist();
      this.GetData();
      this.getFormatsAndIndustry();
      let systemType = localStorage.getItem('systemType');
      // let systemName = '阳光数字商管';
      let systemName = require('@/common/imgs/yunguan.png');
      if (systemType == 'operationManagement') {
        // systemName = '阳光数字商管';
        systemName = require('@/common/imgs/yunguan.png');
      } else if (systemType == 'assetManagement') {
        // systemName = '阳光数字资管';
        systemName = require('@/common/imgs/ziguan.png');
      } else if (systemType == 'businessBuildingOperate') {
        // systemName = '商写运营';
        systemName = require('@/common/imgs/businessBuildingOperate.png');
      }
      $('.logo').html(`<img src="${systemName}" />`);
    },
    //方法集合
    methods: {
      setNull() {
        for (let key in this.m_Form) {
          if (this.m_Form[key] === '') this.m_Form[key] = null;
        }
      },
      GetData() {
        this.setNull();
        Api.queryContractList({ ...this.m_Form, ...this.m_QueryParams }).then(res => {
          this.m_TableData = res.rows;
          this.m_QueryParams.total = res.total;
        });
      },
      projectlist() {
        Api.projectlist({}).then(res => {
          this.m_ProjectList = res.rows;
        });
      },
      //模糊搜索商铺门牌号
      queryShopNumber(res) {
        Api.queryShopNumber({ shopNumber: res }).then(res => {
          this.m_shopCodeList = res.rows;
        });
      },
      //模糊搜索客户名称
      getCustomer(res) {
        Api.infoNamelist({ partnerName: res }).then(res => {
          this.m_CustomerList = res.rows;
        });
      },
      //业态/行业
      getFormatsAndIndustry() {
        Api.listByMapBizId({
          bizId: 'commercial_rent_main_data',
          catalogTypeList: ['business_type_child'],
          mapBizId: localStorage.getItem('userEnterpriseid'), //企业id
        }).then(res => {
          if (res.rows) {
            this.m_FormatsAndIndustryList = res.rows;
          }
        });
      },
      //品牌
      async changeIndustry(val) {
        let parentId = '';
        this.m_FormatsAndIndustryList.forEach(ele => {
          if (ele.primaryKey == val) {
            parentId = ele.parentId;
          }
        });
        Api.categoryList({
          parentId: parentId,
          catalogTypeList: ['brand_child'],
        }).then(res => {
          if (res.rows) {
            this.m_FormatsBrandList = res.rows;
          }
        });
      },
      out() {
        this.setNull();
        Api.export({ ...this.m_Form }).then(res => {});
      },
      currentchange(res) {
        this.m_QueryParams.currentPage = res;
        this.GetData();
      },
      rowClick(row, column, event) {
        console.log(row, column, event);
        this.goAddPage(row);
      },
      //跳转
      async goAddPage(row) {
        let queryData = {
          isRefresh: true,
          customerKey: row.primaryKey,
          headerName: '客户详情',
          isHiddenTools: 1,
          clientName: row.partnerName,
        };
        let pathUrl = {
          name: 'client-manage-info',
          query: queryData,
        };
        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },
    },
  };
</script>
<style scoped>
  ::v-deep .el-col {
    height: 50px;
  }

  /* @import url(); 引入css类 */
</style>
